<template>
  <div class="nav-bar">
    <div v-for="(item, index) in items" 
        :key="index" 
        @click="changeIndex(index)"
        v-bind:class="['nav-item', { 'nav-active': index === currentIndex }]">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3'],
      currentIndex: 0
    };
  },
  methods: {
    changeIndex(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<style>
.nav-bar {
  width: 400px;
  height: 50px;
  margin: 0 auto;
  border: 1px solid #000;
}

.nav-item {
  float: left;
  width: 33.3%;
  height: 100%;
  line-height: 50px;
  text-align: center;
}

.nav-active {
  background-color: #000;
  color: #fff;
}
</style>
